<template>
	<view class="content">
		<template v-if="state==1">
			<view class="info-block">
				<view class="title FangZhengHanZhenGuangBiaoJianTi">报修信息</view>
				<view class="info-item">
					<view class="title-item">
						<view class="must">*</view>
						<view class="name">联系人</view>
					</view>
					<view class="form-item">
						<input placeholder="请输入联系人" v-model="detail.contact_person" type="text" class="form-crl"
							maxlength="10" disabled="true" />
					</view>
				</view>
				<view class="info-item">
					<view class="title-item">
						<view class="must">*</view>
						<view class="name">联系方式</view>
					</view>
					<view class="form-item">
						<input placeholder="请输入联系方式" v-model="detail.contact_phone" class="form-crl" maxlength="11"
							type="number" disabled="true" />
					</view>
				</view>
				<view class="info-item">
					<view class="title-item">
						<view class="must">*</view>
						<view class="name">报修地址</view>
					</view>
					<view class="form-item">
						<input v-model="detail.address" type="text" placeholder="请选择报修地址" disabled="true"
							placeholder-class="inputPlaceholder" class="form-crl" />
						<view class="arrow iconfont icon-a-gengduo1"></view>
					</view>
				</view>
				<view class="info-item">
					<view class="title-item">
						<view class="must">*</view>
						<view class="name">报修分类</view>
					</view>
					<view class="form-item">
						<input v-model="title" type="text" disabled="true" placeholder-class="inputPlaceholder"
							class="form-crl" />
						<view class="arrow iconfont icon-a-gengduo1"></view>
					</view>
				</view>
				<view class="info-item">
					<view class="title-item">
						<view class="must">*</view>
						<view class="name">详细地址</view>
					</view>
					<view class="form-item">
						<input placeholder="请输入详细地址" v-model="detail.detail" class="form-ctrl" maxlength="50"
							type="text" disabled="true" />
					</view>
				</view>
				<view class="info-item">
					<view class="title-item">
						<view class="must">*</view>
						<view class="name">报修内容</view>
					</view>
					<view class="form-item">
						<textarea placeholder="请简述您要报修的内容…" v-model="detail.content" class="form-ctr2" maxlength="80"
							type="text"></textarea>
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="info-block">
				<view class="title FangZhengHanZhenGuangBiaoJianTi">报修信息</view>
				<view class="info-item">
					<view class="title-item">
						<view class="must">*</view>
						<view class="name">联系人</view>
					</view>
					<view class="form-item">
						<input placeholder="请输入联系人" v-model="form.name" type="text" class="form-crl" maxlength="10" />
					</view>
				</view>
				<view class="info-item">
					<view class="title-item">
						<view class="must">*</view>
						<view class="name">联系方式</view>
					</view>
					<view class="form-item">
						<input placeholder="请输入联系方式" v-model="form.phone" class="form-crl" maxlength="11"
							type="number" />
					</view>
				</view>
				<view class="info-item">
					<view class="title-item">
						<view class="must">*</view>
						<view class="name">报修地址</view>
					</view>
					<view class="form-item">
						<input v-model="form.address" @click="chosenPosition" type="text" placeholder="请选择报修地址"
							disabled="true" placeholder-class="inputPlaceholder" class="form-crl" />
						<view class="arrow iconfont icon-a-gengduo1"></view>
					</view>
				</view>
				<view class="info-item">
					<view class="title-item">
						<view class="must">*</view>
						<view class="name">报修分类</view>
					</view>
					<view class="form-item">
						<picker class="form-crl" mode="multiSelector" range-key="name" :range="category"
							@change="bindCategoryCol" @columnchange="categoryColChange" :value="categoryIndexArr">
							{{form.title}}
						</picker>
						<view class="arrow iconfont icon-a-gengduo1"></view>
					</view>
				</view>
				<view class="info-item">
					<view class="title-item">
						<view class="must">*</view>
						<view class="name">详细地址</view>
					</view>
					<view class="form-item">
						<input placeholder="请输入详细地址" v-model="form.dscAddress" class="form-ctrl" maxlength="50"
							type="text" />
					</view>
				</view>
				<view class="info-item">
					<view class="title-item">
						<view class="must">*</view>
						<view class="name">报修内容</view>
					</view>
					<view class="form-item">
						<textarea placeholder="请简述您要报修的内容…" v-model="form.content" class="form-ctr2" maxlength="80"
							type="text"></textarea>
					</view>
				</view>
			</view>
		</template>
		<view class="btn-item" v-if="state==0">
			<view class="btn" @click="handleSave">提交</view>
		</view>
	</view>
</template>

<script>
	import {
		getCategoryApi,
		saveApplyApi,
		getApplyDetailApi
	} from '../../api/report.js'
	import {
		validate
	} from '@/util/validate.js'
	import {
		showToast
	} from '@/util/util.js'
	export default {
		data() {
			return {
				form: {
					title: '暖气报修分类',
					name: '',
					phone: '',
					address: '',
					dscAddress: '',
					recruitType: 0,
					content: '',
					longitude: '',
					latitude: ''
				},
				detail: {
					contact_person: '',
					contact_phone: '',
					address: '',
					detail: '',
					content: '',
					title: ''
				},
				title: '',
				category: [
					[],
					[]
				],
				categoryIndexArr: [0, 0],
				child: [],
				typeList: [],
				state: 0,
				rules: {
					name: {
						name: '联系人',
						required: true,
					},
					phone: {
						name: '联系电话',
						required: true,
					},
					address: {
						name: '报修地址',
						required: true,
					},
					title: {
						name: '报修分类',
						required: true,
					},
					dscAddress: {
						name: '详细地址',
						required: true,
					},
					content: {
						name: '报修内容',
						required: true,
					}
				}
			}
		},
		methods: {
			bindCategoryCol(e) {
				let value = e.target.value;
				this.categoryIndexArr = value;
				if (this.category[0].length !== 0) {
					this.form.title = this.category[0][this.categoryIndexArr[0]].name
				};
				if (this.category[1].length !== 0) {
					this.form.title += ',' + this.category[1][this.categoryIndexArr[1]].name
				}
			},
			categoryColChange(e) {
				if (e.detail.column == 0) {
					this.category[1] = this.child[e.detail.value]
					this.$set(this.category, 1, this.child[e.detail.value])
				}
			},
			getList() {
				uni.showLoading()
				getCategoryApi({}).then(res => {
					this.category[0] = res
					this.child = res.map((item) => item.child)
					this.category[1] = this.child[0]
				}).catch(() => {
					uni.hideLoading()
				})
			},
			//选择位置
			chosenPosition() {
				//获取当前位置
				var that = this;
				const currentLocation = uni.getLocation({
					isHighAccuracy: true,
					success(current) {
						const currentLatitude = current.latitude;
						const currentLongitude = current.longitude;
						uni.chooseLocation({
							latitude: currentLatitude,
							longitude: currentLongitude,
							success: (choosen) => {
								delete choosen.errMsg;
								//console.log(choosen);
								that.form.address = choosen.address;
								that.form.latitude = choosen.latitude;
								that.form.longitude = choosen.longitude;
							},
							fail: (err) => {
								console.log(err);
							}
						})
					},
					fail: (e) => {
						console.log(e);
					}
				})
			},
			handleSave() {
				if (validate(this.form, this.rules)) {
					uni.showLoading({
						title: '提交中',
						mask: true
					})
					saveApplyApi({
						contact_person: this.form.name,
						contact_phone: this.form.phone,
						address: this.form.address,
						detail: this.form.dscAddress,
						content: this.form.content,
						category_id: this.category[1][this.categoryIndexArr[1]].id,
						longitude: this.form.longitude,
						latitude: this.form.latitude
					}).then((res) => {
						uni.showModal({
							showCancel: false,
							title: '提示',
							content: '您的报修已提交，我们会尽快核实并处理',
							success(e) {
								if (e.confirm) {
									uni.navigateBack()
								}
							}
						})
					})
				}
			},
			getDetailApi() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				const id = this.id
				getApplyDetailApi(id).then(data => {
					uni.hideLoading()
					this.detail = data
					this.category[0].forEach((item) => {
						item.child.forEach((item1) => {
							if (item1.id == this.detail.category_id) {
								this.title = item1.name
							}
						})
					})
				}).catch(() => {
					uni.hideLoading()
				})
			}
		},
		onLoad(e) {
			uni.setNavigationBarTitle({
				title: e.title
			})
			this.getList()
			this.form.title = e.title
			if (e.state) {
				this.state = e.state
				this.id = e.id
				this.getDetailApi()
			} else
				this.state = 0
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;
		background: #F7F6F9;

		.info-block {
			padding: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.title {
				color: #BA1519;
				margin: 30rpx 0;
			}

			.info-item:last-child {
				border-bottom: none;
			}

			.info-item {
				display: flex;
				flex-direction: column;
				border-bottom: 1px solid #F7F6F9;

				.title-item {
					display: flex;
					align-items: center;
					line-height: 80rpx;

					.must {
						color: #BA1519;
					}
				}

				.form-item {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.form-crl {
						flex-grow: 1;
						height: 90rpx;
						font-size: 28rpx;
						line-height: 90rpx;
					}

					.form-ctrl {
						flex-grow: 2;
						height: 90rpx;
						font-size: 28rpx;
						line-height: 90rpx;
					}

					.form-ctr2 {
						font-size: 28rpx;
						margin-top: 20rpx;
					}
				}
			}
		}

		.btn-item {
			width: 100%;
			display: flex;
			justify-content: center;
			margin: 50rpx auto;

			.btn {
				background-color: #BA1519;
				color: #fff;
				width: 400rpx;
				height: 100rpx;
				border-radius: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>